<template>
	<view class="page-wraper">
		<view class="page-header">
			<u-tabs :list="tabs" style="width: 100%;" :current="curTabIndex" lineWidth="35"  @click="handleTypeChanged"
				:activeStyle="{color: '#000000',fontWeight: 'bold',transform: 'scale(1.02)'}">
				<view slot="right" style="padding:0px 10px;" @tap="handleRefresh">
					<u-icon name="reload" size="21" bold></u-icon>
				</view>
			</u-tabs>
		</view>
		<scroll-view class="page-body" scroll-y>
			<u-loading-icon loading="true" style="height: 100%; background-color: #FFF;" v-if="isLoading"></u-loading-icon>
			<view style="height: 100%;background-color: #FFF;  height: 100%;" v-if="tableData.length==0 && !isLoading" >
				<u-empty text="暂无订单" style="background-color: #FFF; "></u-empty>
			</view>			
			<view v-for="(item,index) in tableData" :key="index"
				style="background-color: #FFF; margin: 10px 5px; padding: 5px 10px;">
				<view class="flex">
					<view style="line-height: 25px; flex: 1; display: flex;">
						<view>订单号：</view>
						<view style="line-height: 25px; flex: 1;">{{item.reqcode}}</view>
						<view></view>
					</view>
					<view class="flex" style="font-weight: bolder; color: #FF0000;">
						￥{{parseFloat(item.sum).toFixed(2)}}
					</view>
					<view style="padding: 0px 5px" @click="handleShare(index,item)">
						<u-icon name="share" size="18"></u-icon>
					</view>
				</view>

				<view class="flex">
					<!--订单明细-->
					<view style="margin: 10px 0px; flex: 1;">
						<view class="flex" style="border: 1px solid #dadada; border-radius: 5px 5px 0px 0px;">
							<view class="flex1" style="text-align: center;font-weight: bold;padding: 5px;">产品名称</view>
							<view
								style="width: 60px;border-left:1px solid #dadada;text-align: center;font-weight:bolder;padding: 5px;">
								数量</view>
						</view>
						<view class="flex" style="border: 1px solid #dadada; border-top: none;"
							v-for="(gitem,gindex) in item.goods">
							<view class="flex1" style="padding: 5px;">{{gitem.title}}</view>
							<view style="width: 60px;border-left:1px solid #dadada;text-align: center;padding: 5px;">
								{{parseInt(gitem.count)}} {{gitem.unit}}
							</view>
						</view>
					</view>
				</view>
				<view style="flex: 1;line-height: 30px;">
					<text style="font-weight: bold;width: 100px;">配送方式：</text>
					<text style="color: #777;">{{item.yunfei}}</text>
				</view>
				<view style="line-height: 30px;display: flex;">
					<view style="font-weight: bold;">收货地址：</view>
					<view style="display: flex; flex: 1;">
						<view style="color: #777;">{{item.receiverinfo}}
							<text style="padding: 5px;padding-left: 10px;color: #333"
								@click="copyText(item.receiverinfo)">复制</text>
						</view>
					</view>
				</view>

				<view style="display: flex; line-height: 30px;">
					<view style="font-weight: bold;">物流信息：</view>
					<view style="color: #888;flex: 1;" class="flex">
						<view>{{item.deliver.name}} </view>
						<view style="margin-left: 10px;">{{item.deliver.num}}</view>
					</view>
				</view>
				<view style="flex: 1;line-height: 30px;" v-if="otype=='cancel'" >
					<view style="font-weight: bold;width: 100px;">取消备注：</view>
					<view style="background-color: #ececec; padding: 5px;color: #ff0000;"><u-parse :content="item.closedmemo.replace('\n','<br/>')"></u-parse></view>
				</view>
				<view style="flex: 1;line-height: 30px;" v-if="otype!='cancel'">
					<text style="font-weight: bold;width: 100px;">订单备注：</text>
					<text style="color: #ff0000;">{{item.memo}}</text>
				</view>
				
				<u-divider></u-divider>

				<view class="flex" style="padding-bottom: 10px;">
					<view style="flex: 1;">
						 <view style="margin-right: 5px; width: 45px; " @click="handleViewBank(index,item)">
						 	<view v-if="item.paidstatus=='0'" style="background-color: #FF0000; text-align: center;padding:2px 4px;color: #FFF;border-radius: 5px;">未付</view>
						 	<view v-if="item.paidstatus=='1'" style="border:1px solid #00aa00; text-align: center;padding:2px 4px;color: #00aa00;border-radius: 5px;">已付</view>
						 </view>
					</view>
					<view>
						<u-button type="primary" v-if="wuliuVisible()" size="mini" @click="handleFillDeliver(index,item)">填写物流</u-button>
					</view>
				</view>
			</view>
			
			<u-popup :show="deliverVisible" mode="center" round="10" :closeOnClickOverlay="false" @confirm="deliverVisible=false">
				<view v-if="curOrderData" style="text-align: left; padding: 20px; ">
					<view class="flex">
						<view style="flex: 1; text-align: center;font-weight: bold;font-size: 14px;">请录入物流信息</view>
						<view @click="deliverVisible=false">
							<u-icon name="close" size="20"></u-icon>
						</view>
					</view>
					<view class="flex" style="line-height: 25px;">
						<view>订单号：</view>
						<view style="flex: 1;">{{curOrderData.reqcode}}</view>
					</view>
					<view class="flex" style="line-height: 25px;">
						<view>收货地址：</view>
						<view style="flex: 1;">{{curOrderData.receiverinfo}}</view>
					</view>
					
					<view class="flex">
						<!--订单明细-->
						<view style="margin: 10px 0px; flex: 1;">
							<view class="flex" style="border: 1px solid #dadada; border-radius: 5px 5px 0px 0px;">
								<view class="flex1" style="text-align: center;font-weight: bold;padding: 5px;">产品名称</view>
								<view
									style="width: 60px;border-left:1px solid #dadada;text-align: center;font-weight:bolder;padding: 5px;">
									数量</view>
							</view>
							<view class="flex" style="border: 1px solid #dadada; border-top: none;"
								v-for="(gitem,gindex) in curOrderData.goods">
								<view class="flex1" style="padding: 5px;">{{gitem.title}}</view>
								<view style="width: 60px;border-left:1px solid #dadada;text-align: center;padding: 5px;">
									{{parseInt(gitem.count)}} {{gitem.unit}}
								</view>
							</view>
						</view>
					</view>
					
					
					<view class="flex" style="line-height: 25px; margin-top: 10px;">
						<view>物流名称：</view>
						<view style="flex: 1">
							<u-radio-group  placement="column" iconPlacement="right" border-bottom v-model="formData.name">
								<u-radio label="韵达快运" name="韵达快运" labelSize="12" :customStyle="{marginBottom: '10px'}"></u-radio>
								<u-radio label="韵达快递" name="韵达快递" labelSize="12" :customStyle="{marginBottom: '10px'}"></u-radio>
								<u-radio label="京东快递" name="京东快递" labelSize="12" :customStyle="{marginBottom: '10px'}"></u-radio>
								<u-radio label="德邦快递" name="德邦快递" labelSize="12" :customStyle="{marginBottom: '10px'}"></u-radio>
								<u-radio label="德邦快递" name="德邦快递" labelSize="12" :customStyle="{marginBottom: '10px'}"></u-radio>
							</u-radio-group>
						</view>
					</view>
					
					<view class="flex" style="line-height: 25px; margin-top: 10px;">
						<view style="line-height: 25px;">物流单号：</view>
						<view style="flex: 1;">
							
							<u-input v-model="formData.num" placeholder="输入或扫描单号" clearable style="height: 20px;">
								<template slot="suffix">
									<view @click="HandleScanQRcode" >
										<u-icon name="scan" size="24"></u-icon>
									</view>
								</template>
							</u-input>
						</view>
					</view>	
				</view>
				<view class="flex">
					<view style="flex: 1; margin: 5px 10px;">
						<u-button @click="deliverVisible=false">取消</u-button>
					</view>
					<view style="flex: 1;margin: 5px 10px;">
						<u-button type="primary" @click="handleUpdateDeliver">确定</u-button>
					</view>
				</view>
			</u-popup>
		</scroll-view>
 	</view>
</template>

<script>
	import {
		post
	} from 'utils/request.js';
 	export default {
		data() {
			return {
				tabs: [{
						name: "全部",
						otype:''
					},
					{
						name: "待付款",
						otype:"unpay"
					},
					{
						name: "待发货",
						otype:'unsend',
					},
					{
						name: "已发货",
						otype:"done"
					},
					{
						name: "退换货",
						otype:"cancel"
					}
				],
				formData:{
					name:'韵达快运',
					num:''
				},
				isLoading:true,
				deliverVisible:false,
				list: 15,
				page: 0,
				otype:'',
				curTabIndex:1,
				status: 'loadmore',
				tableData: [],
				curOrderData:null,
				curOrderIndex:-1,
			}
		},
		onShow() {
			if(uni.getStorageSync("qrcode")!=""){
				this.formData.num=uni.getStorageSync("qrcode");
				uni.removeStorageSync("qrcode");
			}
		},
		onLoad(option){
			console.log("默认",option);
			if(option){
				if(option.otype=="unpay"){
					this.curTabIndex=1;
					this.otype="unpay";
				}else if(option.otype=="unsend"){
					this.curTabIndex=2;
					this.otype="unsend";
				}else if(option.otype=="done"){
					this.curTabIndex=3;
					this.otype="done";
				}else if(option.otype="cancel"){
					this.curTabIndex=4;
					this.otype="cancel";
				}
			}else{
				type="";
				this.curTabIndex=0;
			}
			this.loadDataList();
		},

		methods: {
			handleShare(index,data){
				
			},
			wuliuVisible(){
				if(this.otype=="unpay"){
					return false;
				}
				if(this.otype=='unsend'){
					return true;
				}
				if(this.otype=="done"){
					return true;
				}
				return false;
			},
			handleTypeChanged(item){
				if(item.otype!=this.otype){
					this.otype=item.otype;
					this.loadDataList();
				}
			},
			copyText(str) {
				uni.setClipboardData({
					data: str,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				})
			},
			loadDataList() {
				this.tableData=[];
				const params = {
					type:this.otype
				};
				this.isLoading=true;
				post("/buylist/list", params).then(res => {
					if (res.statusCode == 200 && res.data.code) {
						this.tableData = res.data.list;
					}
					this.isLoading=false;
				});
			},
			handleViewBank(index,data){
				console.log("查看银行回单");
			},
			handleRefresh() {
				this.tableData=[];
				this.loadDataList();
			},
			handleFillDeliver(index,data){
				this.curOrderIndex=index;
				this.curOrderData=JSON.parse(JSON.stringify(data));
				this.formData.name=this.curOrderData.deliver.name==""? "韵达快运":this.curOrderData.deliver.name;
				this.formData.num=this.curOrderData.deliver.num;
				this.deliverVisible=true;
			},
			HandleScanQRcode(){
				 uni.navigateTo({
				 	url:"/pages/buy/scancode"
				 })
			},
			handleUpdateDeliver(){
				const params = {
					id:this.curOrderData.id,
					name:this.formData.name,
					num:this.formData.num,
					memo:''
				};
				post("/buylist/updatedeliver", params).then(res => {
					if (res.statusCode == 200 && res.data.code) {
						this.deliverVisible=false;
						 this.loadDataList();
					}
				});
				console.log("更新物流信息");
			}
		}
	}
</script>

<style scoped>
	.order-wraper {
		background-color: #f9f9f9;
		margin-bottom: 5px;
		padding: 10px;
		border: 1px solid #888;
		margin: 2px;
		border-radius: 5px;
	}

	.section_label {}

	.section_content {
		color: #888;
		padding-left: 5px;
	}
</style>